<template>
    <!-- 商品详情-box -->
    <view class="good-info-box">
        <view class="g-i-a">
            <!-- 手机号码 -->
            <view>
                <text class="a-title">{{ phoneLbTxt }}</text>
                <text>{{ cellphone ? " " + cellphone : " 暂无手机号" }}</text>
            </view>
            <!-- 客户地址 -->
            <view>
                <text class="a-title">{{ adrrLbtxt }}</text>
                <text
                    >{{ " "
                    }}{{
                        district
                            ? `中国 ${district} ${address}`
                            : "" + address
                            ? address
                            : "暂无地址"
                    }}</text
                >
            </view>
            <!-- 累计销售 -->
            <view>
                <text class="a-title">{{
                    md == 15 ? "累计预约：" : countSaleLbTxt
                }}</text>
                <text class="c-s-m icon-font icon-style" @click="onClick"
                    >{{ amount ? " " + amount + " " : " 0 " }}&#xe600;</text
                >
            </view>
            <view v-if="md == 15">
                <text class="a-title">剩余项目:</text>
                <text
                    class="c-s-m icon-font icon-style"
                    @click="getRemainingItems"
                    >{{ num_xm ? " " + num_xm + " " : " 0 " }}&#xe600;</text
                >
            </view>
        </view>
        <view class="g-i-a">
            <!-- 初始欠款： -->
            <view v-if="md != 15">
                <text class="a-title">{{ startQkLbTxt }}</text>
                <text class="price">{{ rece ? " " + rece : " 0" }}</text>
            </view>

            <!-- 预付款： -->
            <view>
                <text class="a-title">{{ yfLbTxt }}</text>
                <text
                    class="price price-link icon-font icon-style"
                    @click="onClickPrice"
                    >{{ money ? " " + money + " " : " 0 " }} &#xe600;</text
                >
            </view>
            <!-- 订单应收： -->
            <view>
                <text class="a-title">{{ ddysLbtxt }}</text>
                <text
                    class="price price-link icon-font icon-style"
                    @click="onReceMoney"
                    >{{
                        price_count ? " " + price_count + " " : " 0 "
                    }}&#xe600;</text
                >
            </view>
        </view>
        <!-- <view class="g-i-a">
            <view>
                <text class="a-title gjjl-cur"
                    >跟进记录
                    <text class="icon-font icon-style">&#xe600;</text></text
                >
            </view>
        </view> -->
    </view>
</template>

<script>
import lang from "../../js/conf/Lang.js";
export default {
    props: [
        "cellphone",
        "district",
        "address",
        "amount",
        "rece",
        "price_count",
        "money",
        "md",
        "num_xm",
    ],
    data() {
        return {
            phoneLbTxt: lang.customerTxt.phoneLbTxt,
            adrrLbtxt: lang.customerTxt.adrrLbtxt,
            countSaleLbTxt: lang.customerTxt.countSaleLbTxt,
            startQkLbTxt: lang.customerTxt.startQkLbTxt,
            yfLbTxt: lang.customerTxt.yfLbTxt,
            ddysLbtxt: lang.customerTxt.ddysLbtxt,
        };
    },

    methods: {
        getRemainingItems() {
            this.$emit("getRemainingItems");
        },
        onClick() {
            this.$emit("countSaleMoney");
        },

        onClickPrice() {
            this.$emit("payMoneyRece");
        },

        onReceMoney() {
            this.$emit("receMoney");
        },
    },
};
</script>

<style lang="scss">
// 商品详情-box
.good-info-box {
    padding-left: 20px;
    .g-i-a {
        border-bottom: 1px solid #eee;
        padding: 10px 0;
        color: #333;
        font-size: 14px;
        .a-title {
            // color: #9FA0A8;
            font-size: 14px;
            color: #999;
            display: inline-block;
            width: 80px;
            text-align-last: justify;
            text-align: justify;
            text-justify: distribute-all-lines;
            &.gjjl-cur{
                cursor: pointer;
            }
        }
        .price {
            color: #f04848;
        }

        .price-link {
            cursor: pointer;
        }
        .price-link:hover {
            color: #ff0000;
        }
        .c-s-m {
            cursor: pointer;
        }

        .c-s-m:hover {
            color: #3388ff;
        }
    }
}
</style>
